<template>
  <j-modal
    :title="'任务详情 - ' + (model.workTypeName || '任务信息')"
    :width="1200"
    :visible="visible"
    :footer="null"
    switchFullscreen
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 基本信息 -->
      <a-card title="基本信息" :bordered="false" style="margin-bottom: 16px">
        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">任务ID：</span>
              <span class="value">{{ model.id || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">生产计划ID：</span>
              <span class="value">{{ model.planId || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">工序顺序：</span>
              <a-tag color="purple">{{ model.sequence || '-' }}</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">工种编码：</span>
              <span class="value">{{ model.workTypeCode || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">工种名称：</span>
              <a-tag color="blue">{{ model.workTypeName || '-' }}</a-tag>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">状态：</span>
              <!-- 0-待领取,1-已领取,2-进行中,3-已完成,4-暂停,5-部分领取 -->
              <a-tag v-if="model.status == 0" color="orange">待领取</a-tag>
              <a-tag v-else-if="model.status == 1" color="blue">已领取</a-tag>
              <a-tag v-else-if="model.status == 2" color="brown">进行中</a-tag>
              <a-tag v-else-if="model.status == 3" color="green">已完成</a-tag>
              <a-tag v-else-if="model.status == 4" color="red">已暂停</a-tag>
              <a-tag v-else-if="model.status == 5" color="cyan">部分领取</a-tag>
              <a-tag v-else color="default">-</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">任务数量：</span>
              <span class="value">{{ model.taskQuantity || 0 }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">完成数量：</span>
              <span class="value">{{ model.completedQuantity || 0 }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <span class="label">完成进度：</span>
              <a-progress
                :percent="
                  model.completedQuantity && model.taskQuantity
                    ? Math.round((model.completedQuantity / model.taskQuantity) * 100)
                    : 0
                "
                :status="model.completedQuantity == model.taskQuantity ? 'success' : 'active'"
                style="width: 120px"
              />
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 时间信息 -->
      <a-card title="时间信息" :bordered="false" style="margin-bottom: 16px">
        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划开始日期：</span>
              <span class="value">{{ model.planStartDate || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划结束日期：</span>
              <span class="value">{{ model.planEndDate || '-' }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">实际开始日期：</span>
              <span class="value">{{ model.actualStartDate || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">实际结束日期：</span>
              <span class="value">{{ model.actualEndDate || '-' }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
  </j-modal>
</template>

<script>
export default {
  name: 'TaskDetailModal',
  components: {},
  data() {
    return {
      visible: false,
      model: {},
      confirmLoading: false,
      url: {
        queryById: '/mes/task/queryById',
      },
    }
  },
  methods: {
    show(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    detail(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.model = {}
    },
    handleCancel() {
      this.close()
    },
    getEfficiencyText() {
      if (!this.model.estimatedHours || !this.model.actualHours) {
        return '-'
      }
      const efficiency = ((this.model.estimatedHours / this.model.actualHours) * 100).toFixed(1)
      return `${efficiency}%`
    },
    getEfficiencyColor() {
      if (!this.model.estimatedHours || !this.model.actualHours) {
        return '#999'
      }
      const efficiency = this.model.estimatedHours / this.model.actualHours
      if (efficiency >= 1) {
        return '#52c41a' // 绿色 - 高效
      } else if (efficiency >= 0.8) {
        return '#faad14' // 橙色 - 一般
      } else {
        return '#f5222d' // 红色 - 低效
      }
    },
  },
}
</script>

<style lang="less" scoped>
.detail-item {
  margin-bottom: 12px;

  .label {
    font-weight: 500;
    color: #666;
    margin-right: 8px;
  }

  .value {
    color: #333;
  }
}
</style>
